<template>
    <div @click="onPlayGame(props.item)">
        <div class="cover " :class="props.type == 2 && 'cover1'">
            <div class="game_hot" v-if="props.item.is_hot === 1">
                <iconpark-icon name="hot" size=".8rem"></iconpark-icon>
                <span>HOT</span>
            </div>
            <img
                :src="settings.backend_upload + (props.type == 2 ? props.item.picture_h5 : props.item.gamePictureH5)" />

        </div>

        <div class="title" :class="props.type == 2 && 'title1'">{{ unserialize(props.item.name, props.type == 2 ?
            false : true) }}</div>
    </div>
    <iconpark-icon v-if="hasLogin" class="fav"
        :name="allCollected.includes(props.item.id) ? 'shoucang-sel' : 'shoucang-def'" size="1rem"
        @click.stop="reqCollect(props.item, allCollected)"></iconpark-icon>
    <div v-if="props.item.ismMintain === 1" class="masking_layer">
        <iconpark-icon class="maskin_img" name="padlock1" size="28" />
        <span>{{ t('inside_page_game_coming_soon') }}</span>
        <span>{{ t('inside_page_game_stay_tuned') }}</span>
    </div>
</template>

<script setup lang='ts' name="Img">
import { useI18n } from 'vue-i18n';
import { unserialize, onPlayGame } from '@/utils/useStoreMethods';
import { reqCollect } from '@/utils/useNetMethods';
import { storeToRefs } from 'pinia';
import { Page } from '@/store/page';
import { User } from '@/store/user';
import pinia from '@/store';
const { allCollected, hasLogin } = storeToRefs(User(pinia));
const { settings } = storeToRefs(Page(pinia));
const { t } = useI18n();
const props: any = defineProps({
    item: {
        type: Object,
        default: {}
    },
    type: {
        type: Number,
        default: 1
    }
})

</script>
<style scoped lang="scss">
.masking_layer {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(1px);
    background: rgba(0, 0, 0, 0.6);
    font-family: PingFang SC;
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
    color: #ffffff;

    .maskin_img {
        width: 32px;
        height: 32px;
        margin-bottom: 8px;
    }

}

.cover {
    width: 82px;
    height: 82px;
    position: relative;

    .game_hot {
        // width: 38px;
        height: 15px;
        position: absolute;
        padding: 0 8px 0 4px;
        left: 0px;
        top: 0px;
        z-index: 9;
        background: url(/imgs/home/is_hot.png) no-repeat;
        background-size: 100% 100%;
        display: flex;
        align-items: center;

        .game_hot_icon {
            width: 8px;
            height: 10px;
            margin: 0 2px;
        }

        span {
            color: #FFFFFF;
            font-size: 8px;
            font-family: PingFang SC;
        }
    }

    img {
        width: 100%;
        height: 100%;
    }


}


.fav {
    position: absolute;
    top: 5px;
    right: 5px;
}

.cover1 {
    width: 112px;
    height: 112px;


}

.title {
    width: 90%;
    margin: 0 auto;
    text-align: center;
    font-size: 14px;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.title1 {
    height: 36px;
    line-height: 36px;
}
</style>